
<template>
  <el-container>
    <el-header>
      <div class="client_head">
        <div class="client_head_title"></div>
        <div class="client_head_nav">
          <p>当前位置:&nbsp
            <a href="">首页</a>
            &nbsp;>>&nbsp;
            <router-link to="/parkNews">园区资讯</router-link>
            &nbsp;>>&nbsp;
            <a href="">{{informationType}}</a>
          </p>
        </div>
      </div>
    </el-header>
    <el-main>
      <div id="test2">
        <div style="height: 300px;" class="left_navigation">
          <img src="../../../assets/find.png" style="float: left">
          <a @click="informationType ='园区新闻',detail=false,getContents()" >园区新闻</a>
          <a @click="informationType ='园区公告',detail=false,getContents()">园区公告</a>
          <a @click="informationType ='园区活动',detail=false,getContents()">园区活动</a>
          <a @click="informationType ='园区政策',detail=false,getContents()" >园区政策</a>
        </div>

        <div class="right_content" v-for="cont in contents" v-show="!detail" v-if="informationType === cont.informationType">
          <a class="left_a" @click="detailContent(cont)"> {{cont.informationTitle}}</a>
          <a class="right_a">{{cont.updateDatetime.substring(0,10)}}</a>
        </div>

        <div style="float:right;width: 800px;height: 600px;text-align: center" v-show="detail" id="detail" >
          <h2 id="title" style="color: #338FCC;margin-top: 20px;margin-bottom: 30px;text-align: center"></h2>
          <hr>
          <a id="date" style="border-right: 1px solid black;"></a>
          <a id="from" ></a>
          <p  id="content"></p>
        </div>









      </div>
      <div style="width: 400px;float: right;height: 100px;" v-show="!detail">

        <el-pagination style="display: inline-block"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="10"
          layout="prev, pager, next, total, jumper"
          :total="totalCount " >
        </el-pagination>

      </div>

    </el-main>

  </el-container>

</template>


<style scoped>

  .client_head{
    width: 1000px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid;
    color: #517bc0;

  }
  .client_head_title{

  }
  .client_head_title a {
    color: #517bc0;
    font-size: 25px;
    font-weight: bold;
    font-family: "Microsoft Yahei";
  }
  .left_navigation{
    float:left;
    width: 120px;
  }
  .left_navigation a{
   display: block;
    margin-top: 10px;
    margin-bottom: 38px;
  }
  .left_navigation a:hover{
    color: blue;
  }
  .right_content{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed;
    border-top: 1px dashed;
    width: 800px;
    float: right;
    font-size: 12px;
  }

  .right_a{
    float: right;
  }
  .left_a{
    float: left;
  }
  .client_head_nav p{
    font-size: 12px;
    color: black;


  }
  .client_head_nav a{
    text-decoration:none;
  }


  .el-header{

    color: #000000;
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 40px;
  }
  .el-footer {
    background-color:#E9EEF3 ;
    color: #000000;
    text-align: center;
    line-height: 60px;
    display: flex;
    justify-content: center;

  }
  .main{

    height: 700px;
    float: left;
    display: flex;
    text-align: left;


  }


  #test2 {
    width: 1000px;
    height: 750px;
  }
  #detail a{
    text-align: center;
    margin-right: 5px;
    margin-left: 5px;
  }
  .el-main {

    color: #333;

    margin:  auto;
  }

  .title{
    color: #517bc0;
    font-size: 11px;
    font-weight: bold;
    font-family: "Microsoft Yahei";
    line-height: 40px;


  }
  .main  p{
    line-height: 50px;
    font-size: 13px;
    padding-right:20px;


  }


</style>

<script>
  import Vue from 'vue'

  import {InformationService} from "./InformationService";

  export default
  {
    name:'Test2',
    data:function () {
      return {
        detail:false,
        active:0,
        title:"",
        date:"",
        currentPage:1,
        pageSize:10,
        contents:[

        ],
        informationType:"园区新闻",
        currentPage3: 5,
        totalCount:0

      }

    },
    created(){
      this.informationType = this.$route.query.informationType;


      this.getContent();
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      getContents:function(){
        this.totalCount = 0;
        for(let i = 0;i<this.contents.length;i++)
          if(this.contents[i].informationType===this.informationType)
            this.totalCount++;

      },
      getContent:function () {
        this.totalCount = 0;
        let _this = this;
        _this.contents = [];


        var parm = this.installParms();
       InformationService.findInformations(parm).then((res) => {
          // alert(res.data[0].title);
           this.contents = res.data.datas;
           console.log(this.contents.length)
         for(let i = 0;i<this.contents.length;i++)
           if(this.contents[i].informationType===this.informationType)
             this.totalCount++;

         // this.contents.totalCount = res.data.totalCount;

            console.log(this.contents);

        }).catch((error) => {
          this.$message({
            type: 'error',
            message: '查询资讯出错'
          })
        })

          // .then(function (res) {
          //   for (let i=0;i<res.data.length;i++) {
          //         _this.contents.push({
          //           title: res.data[i].title,
          //           date: res.data[i].date.substring(0, 10),
          //           content: res.data[i].content
          //         })
          //       }
          // })
          // .catch(function (error) {
          //   console.log(error);
          // })
        // let _this = this;
        // _this.contents = [];
        // ParkNewsService.findParkNewss().then((res) => {
        //   for (let i=0;i<res.data.length;i++) {
        //     _this.contents.push({
        //       title: res.data[i].title,
        //       date: res.data[i].date.substring(0, 10),
        //       content: res.data[i].content
        //     })
        //   }
        // }).catch((error) => {
        //   this.$message({
        //     type: 'error',
        //     message: '网络繁忙，请稍候再试！'
        //   })
        // })

      },
      installParms() {
        var parms = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        }
        return parms;
      },
      detailContent(cont){
        this.detail=!this.detail;
        window.document.getElementById("content").innerHTML = cont.content;
        window.document.getElementById("date").innerHTML = cont.updateDatetime.substring(0,10)+" "+cont.updateDatetime.substring(11,19)+"   ";
        window.document.getElementById("title").innerHTML = cont.informationTitle;
        window.document.getElementById("from").innerHTML = "   来源 :"+cont.source;



      }

      // detailContent(title){
      //   let _this = this;
      //   _this.contents=[];
      //   axios({
      //     method: "get",
      //     data: {},
      //     // baseURL:'/api',
      //     url: "/getNews"
      //   })
      //     .then(function (response) {
      //       for (let i=0;i<response.data.length;i++){
      //         _this.contents.push({
      //           title:response.data[i].title,
      //           time:response.data[i].time.substring(0,10)
      //
      //         });
      //       }
      //
      //
      //     })
      //     .catch(function (error) {
      //       console.log(error);
      //     });
      // }


    }
  }
</script>
